<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #father {
        width: 300px;
        height: 900px;
        margin-left: 100px;
        border: 10px solid lightgreen;
        padding: 10px;
        overflow: auto;
      }
      #child {
        width: 400px;
        height: 1100px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="father">
      <div id="child"></div>
    </div>
    <script>
      // 都是四舍五入的整数，小数可以用getBoundingClientRect
      const father = document.querySelector("#father");
      const child = document.querySelector("#child");
      // 边框以内的尺寸，不包含滚动条
      console.log(father.clientWidth);//300+10+10-17=303
      console.log(father.clientHeight);//900+10+10-17=903
      // 边框以内的尺寸，包含边框，包含滚动条（一般这里的产生的滚动条就直接包含在内容里面了，不要计算）
      console.log(father.offsetWidth);//300+10+10+10+10=340
      console.log(father.offsetHeight);//300+10+10+10+10=940
      // 边框以内的尺寸，实际的宽度，滚动条隐藏的也算，没有滚动条的时候和clientWidth一样
      console.log(father.scrollWidth);//400+10+10=420
      console.log(father.scrollHeight);//1100+10+10+10=1120

      // 2024-01-03更新
      // 获取元素尺寸的几种方式
      // 1、getComputedStyle(dom).width
      // 是CSSOM树尺寸，有padding，border就不一样
      // console.log(getComputedStyle(father).width);//282.2
      // 2、father.style
      // DOM树的尺寸，如果设置在css上就读不到
      // console.log(father.style.width);//''
      // 3、上述的clientWidth，offsetWidth，scrollWidth
      // 布局树，如果元素有transform，因为是GPU画的所以上述的可能不准
      // father.style.transform = "scale(0.5)";
      // console.log(father.clientWidth);//303
      // 4、dom.getBoundingClientRect()
      // father.style.transform = "scale(0.5)";
      // console.log(father.getBoundingClientRect().width);//169.6
    </script>
  </body>
</html>
